<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-gray-900 to-black">
    <!-- Hero Section -->
    <section class="relative pt-20 pb-32 px-6">
      <div class="max-w-7xl mx-auto">
        <!-- 主标题区域 -->
        <div class="text-center mb-16">
          <h1
            class="text-6xl md:text-8xl font-bold bg-gradient-to-r from-yellow-400 via-orange-400 to-amber-400 bg-clip-text text-transparent mb-8 animate-fade-in"
          >
            球球助手
          </h1>
          <p class="text-xl md:text-2xl text-white/80 mb-8 max-w-3xl mx-auto leading-relaxed">
            为体育爱好者提供专业的比赛数据查询和分析服务
          </p>
          <p class="text-sm text-yellow-400/90 mb-8 max-w-2xl w-fit mx-auto flex items-center gap-2">
            <span class="mt-[-4px]">ℹ️</span>
            <span>本平台仅提供足球数据查询和信息展示服务，不构成购彩建议, 所有数据仅供学习参考</span>
          </p>
          <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
            <NuxtLink
              to="/guess-football"
              class="px-8 py-4 bg-gradient-to-r from-yellow-500 to-orange-500 text-white rounded-full font-semibold text-lg shadow-2xl hover:shadow-yellow-500/25 transition-all duration-300 transform hover:scale-105 hover:from-yellow-600 hover:to-orange-600"
            >
              查看比赛
            </NuxtLink>
            <NuxtLink
              to="/about"
              class="px-8 py-4 border-2 border-white/30 text-white rounded-full font-semibold text-lg hover:bg-white/10 transition-all duration-300"
            >
              了解更多
            </NuxtLink>
          </div>
        </div>

        <!-- 功能特色卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
          <div
            class="card bg-white/10 backdrop-blur-lg border border-white/20 p-8 text-center hover:bg-white/15 transition-all duration-300 transform hover:scale-105"
          >
            <div
              class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-6"
            >
              <div class="text-2xl text-white">📊</div>
            </div>
            <h3 class="text-xl font-semibold text-white mb-4">数据展示</h3>
            <p class="text-white/70">提供比赛数据的多维度展示</p>
          </div>

          <div
            class="card bg-white/10 backdrop-blur-lg border border-white/20 p-8 text-center hover:bg-white/15 transition-all duration-300 transform hover:scale-105"
          >
            <div
              class="w-16 h-16 bg-gradient-to-br from-orange-500 to-amber-600 rounded-full flex items-center justify-center mx-auto mb-6"
            >
              <div class="text-2xl text-white">🏆</div>
            </div>
            <h3 class="text-xl font-semibold text-white mb-4">数据查询</h3>
            <p class="text-white/70">便捷查询比赛数据和球队信息</p>
          </div>

          <div
            class="card bg-white/10 backdrop-blur-lg border border-white/20 p-8 text-center hover:bg-white/15 transition-all duration-300 transform hover:scale-105"
          >
            <div
              class="w-16 h-16 bg-gradient-to-br from-amber-600 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6"
            >
              <div class="text-2xl text-white">⏰</div>
            </div>
            <h3 class="text-xl font-semibold text-white mb-4">实时更新</h3>
            <p class="text-white/70">实时监控，及时获取数据</p>
          </div>
        </div>

        <!-- 数据统计 -->
        <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
          <div class="text-center">
            <div class="text-4xl font-bold text-yellow-400 mb-2">{{ stats.users }}+</div>
            <div class="text-white/70">注册用户</div>
          </div>
          <div class="text-center">
            <div class="text-4xl font-bold text-amber-400 mb-2">{{ stats.matches }}+</div>
            <div class="text-white/70">分析场次</div>
          </div>
          <div class="text-center">
            <div class="text-4xl font-bold text-orange-400 mb-2">{{ stats.leagues }}+</div>
            <div class="text-white/70">覆盖联赛</div>
          </div>
        </div>
      </div>

      <!-- 背景装饰 -->
      <div class="absolute top-20 left-10 w-20 h-20 bg-yellow-500/20 rounded-full blur-xl animate-pulse-slow"></div>
      <div
        class="absolute top-40 right-20 w-32 h-32 bg-orange-500/20 rounded-full blur-xl animate-pulse-slow"
        style="animation-delay: 1s"
      ></div>
      <div
        class="absolute bottom-20 left-1/4 w-24 h-24 bg-amber-500/20 rounded-full blur-xl animate-pulse-slow"
        style="animation-delay: 2s"
      ></div>
    </section>

    <!-- 平台优势 -->
    <section class="py-20 px-6 bg-black/20">
      <div class="max-w-7xl mx-auto">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-white mb-4">为什么选择我们</h2>
          <p class="text-white/70 text-lg">专业的足球数据查询服务</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-lg border border-white/20 rounded-xl p-8 text-center">
            <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-6">
              <span class="text-3xl">🎯</span>
            </div>
            <h3 class="text-white text-xl font-semibold mb-3">专注足球数据</h3>
            <p class="text-white/70 text-sm">专注于足球比赛数据展示，覆盖主流联赛和赛事的公开信息</p>
          </div>

          <div class="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-lg border border-white/20 rounded-xl p-8 text-center">
            <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-6">
              <span class="text-3xl">🤖</span>
            </div>
            <h3 class="text-white text-xl font-semibold mb-3">数据可视化</h3>
            <p class="text-white/70 text-sm">通过图表和数据可视化，帮助用户更好地理解比赛信息</p>
          </div>

          <div class="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-lg border border-white/20 rounded-xl p-8 text-center">
            <div
              class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6"
            >
              <span class="text-3xl">🔒</span>
            </div>
            <h3 class="text-white text-xl font-semibold mb-3">安全可靠</h3>
            <p class="text-white/70 text-sm">数据来源公开透明，保护用户隐私，合规运营</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-6">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-4xl font-bold text-white mb-6">准备开始使用数据查询工具？</h2>
        <p class="text-white/70 text-lg mb-4">加入我们，获取专业的足球数据查询服务</p>
        <p class="text-sm text-yellow-400/90 mb-8 max-w-2xl w-fit mx-auto flex items-center gap-2">
          <span class="mt-[-4px]">ℹ️</span>
          <span>仅供学习和了解足球比赛使用</span>
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <NuxtLink
            to="/register"
            class="px-8 py-4 bg-gradient-to-r from-yellow-600 via-orange-600 to-amber-600 text-white rounded-full font-semibold text-lg shadow-2xl hover:shadow-orange-500/25 transition-all duration-300 transform hover:scale-105"
          >
            立即注册
          </NuxtLink>
          <NuxtLink
            to="/login"
            class="px-8 py-4 border-2 border-white/30 text-white rounded-full font-semibold text-lg hover:bg-white/10 transition-all duration-300"
          >
            已有账号？登录
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// 导入必要的组合式API
import { reactive, onMounted } from 'vue';

// SEO配置
useSEO({
  title: '球球助手 - 足球数据查询平台',
  description: '为足球爱好者提供专业的比赛数据查询服务，包括历史战绩、球队信息、赛程安排等公开数据。',
  keywords: '球球助手,足球数据,比赛查询,球队信息,足球统计',
});

// 统计数据
const stats = reactive({
  users: 50000,
  matches: 100000,
  leagues: 50,
});

// 数字动画效果
onMounted(() => {
  // 这里可以添加数字滚动动画
});
</script>
